<template>
    <view class="columnbox wdh-100 content">
        <view class="info-box columnbox wdh-100">
            <view class="rowbox one-info spb">
                <view class="info-title">账户类型</view>
                <radio-group v-model="type" @change="typeChange">
                    <radio style="transform: scale(.7);" :checked="type=='1'" value="1">
                        <text style="margin-left: 20rpx;transform: scale(1.4);">银行卡</text>
                    </radio>
                    <radio style="transform: scale(.7);" :checked="type=='2'" value="2">
                        <text style="margin-left: 20rpx;transform: scale(1.4);">支付宝</text>
                    </radio>
                </radio-group>
            </view>
        </view>
        <template v-if="type=='1'">
            <view class="rowbox one-info spb">
                <view class="info-title">持卡人</view>
                <input placeholder-class="reg-pl" class="info-input" v-model="name" placeholder="请输入" />
            </view>
            <view class="rowbox one-info spb">
                <view class="info-title">银行卡号</view>
                <input placeholder-class="reg-pl" class="info-input" v-model="bank" placeholder="请输入" />
            </view>

            <view class="rowbox one-info spb">
                <view class="info-title">银行预留手机号</view>
                <input placeholder-class="reg-pl" class="info-input" v-model="phone" placeholder="请输入" />
            </view>
            <view class="rowbox one-info spb">
                <view class="info-title">开户行</view>
                <input placeholder-class="reg-pl" class="info-input" v-model="khh" placeholder="请输入" />
            </view>
        </template>
        <template v-else>
            <view class="rowbox one-info spb">
                <view class="info-title">姓名</view>
                <input placeholder-class="reg-pl" class="info-input" v-model="name" placeholder="请输入" />
            </view>
            <view class="rowbox one-info spb">
                <view class="info-title">支付宝账号</view>
                <input placeholder-class="reg-pl" class="info-input" v-model="alipay" placeholder="请输入" />
            </view>
        </template>
        <view class="rowbox one-info spb">
            <view class="info-title">设为默认账户</view>
            <switch style="transform: scale(.7);"></switch>
        </view>
        <view class="notice-box">注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项</view>
        <view style="width: 100%;height: 200rpx;"></view>
        <view class="rowbox wdh-100 bottom-box">
            <view v-if="submitflag" class="rowbox wdh-100 send-btn grey-btn" @click="submitInfo">完成</view>
            <view v-else class="rowbox wdh-100 send-btn" @click="submitInfo">保存</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: '1',
                value: '',
                alipay: '',
                bank: '',
                phone: '',
                name: '',
                khh: '',
                submitflag: false,
                id: 0,
                updateflag: false
            };
        },
        onLoad(options) {
            if (options.id) {
                this.id = options.id * 1
                this.updateflag = true
                this.getInfoDetail()
            }
        },
        methods: {
            getInfoDetail() {
                this.$req.post('/doctor/bankinfo', {
                    id: this.id
                }).then(res => {
                    let info = res.data.data
                    this.bank = info.bank
                    this.khh = info.khh
                    this.name = info.name
                    this.phone = info.phone
                    this.alipay = info.alipay
                    this.type = info.alipay == '' ? '1' : '2'
                })
            },
            typeChange(e) {
                this.type = e.detail.value
            },
            submitInfo() {
                uni.showLoading({
                    title: '正在保存'
                })
                if (this.type == '1') {
                    if (this.name == '') {
                        uni.showToast({
                            title: '请输入持卡人',
                            icon: 'none'
                        })
                        return false
                    }
                    if (this.phone == '') {
                        uni.showToast({
                            title: '请输入银行预留手机号',
                            icon: 'none'
                        })
                        return false
                    }
                    if (this.khh == '') {
                        uni.showToast({
                            title: '请输入开户行',
                            icon: 'none'
                        })
                        return false
                    }
                } else {
                    if (this.name == '') {
                        uni.showToast({
                            title: '请输入姓名',
                            icon: 'none'
                        })
                        return false
                    }
                    if (this.alipay == '') {
                        uni.showToast({
                            title: '请输入支付宝帐号',
                            icon: 'none'
                        })
                        return false
                    }
                }
                if (!this.submitflag) {
                    this.submitflag = true
                    if (this.updateflag) {
                        this.$req.post('/doctor/bankupdate', {
                            doctorid: uni.getStorageSync('uid'),
                            state: this.type * 1,
                            alipay: this.alipay,
                            bank: this.bank,
                            phone: this.phone,
                            name: this.name,
                            khh: this.khh,
                            id: this.id
                        }).then(res => {
                            uni.hideLoading()
                            this.submitflag = false
                            uni.showModal({
                                title: '修改成功',
                                success: () => {
                                    uni.navigateBack()
                                }
                            })
                        })
                    } else {
                        this.$req.post('/doctor/bankadd', {
                            doctorid: uni.getStorageSync('uid'),
                            state: this.type * 1,
                            alipay: this.alipay,
                            bank: this.bank,
                            phone: this.phone,
                            name: this.name,
                            khh: this.khh,
                        }).then(res => {
                            uni.hideLoading()
                            this.submitflag = false
                            uni.showModal({
                                title: '添加成功',
                                success: () => {
                                    uni.navigateBack()
                                }
                            })
                        })
                    }
                }
            },
        }
    }
</script>


<style lang="scss" scoped>
    .content {
        background: #F5F8FB;
        min-height: 100vh;
        justify-content: flex-start;
        font-family: PingFang SC;
    }

    .one-info {
        width: 100%;
        padding: 32rpx 32rpx;
        background: #fff;
        border-bottom: #F5F7F9 solid 1px;
        font-size: 26rpx;

        .info-title {
            font-weight: bold;
            font-size: 26rpx;
            color: #202020;
            width: 200rpx;
            margin-right: 20rpx;
        }

        .info-input {
            width: calc(100% - 190rpx);
            text-align: right;
            font-size: 26rpx;
        }

        .code-box {
            width: calc(100% - 190rpx);
        }

        .code-input {
            text-align: left;
            font-size: 26rpx;
            width: 200rpx;
        }

        .code-btn {
            font-weight: bold;
        }
    }

    .info-box {
        margin-top: 20rpx;
    }

    .notice-box {
        font-size: 24rpx;
        width: 710rpx;
        margin: 20rpx 0;
        color: #a2a2a2;
    }
</style>